@charset "utf-8";
/* CSS Document */

        /* 为通知公告页面添加特定样式 */
        .list-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .list-content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .list-content h1 {
            color: #333;
            border-bottom: 2px solid #007BFF;
            padding-bottom: 10px;
            text-align: center;
        }

        .list-list {
            list-style-type: none;
            padding: 0;
        }

        .list-list li {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .list-list li:last-child {
            border-bottom: none; /* 移除最后一个项目的底边框 */
        }

        .list-index {
            width: 20px; /* 固定日期列宽度 */
            color: #666;
            font-size: 0.9em;
        }

        .list-date {
            width: 150px; /* 固定日期列宽度 */
            color: #666;
            font-size: 0.9em;
        }

        .list-title {
            flex-grow: 1; /* 标题占据剩余空间 */
            padding: 0 15px; /* 与日期和链接之间留白 */
        }

        .list-link {
            width: 100px; /* 固定链接按钮宽度 */
            text-align: center;
        }

        .list-link a {
            display: inline-block;
            padding: 6px 12px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .list-link a:hover {
            background-color: #0056b3;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .list-list li {
                flex-direction: column;
                align-items: flex-start;
            }

            .list-index, .list-date, .list-title, .list-link {
                width: 100%; /* 在小屏幕上堆叠 */
                padding: 5px 0;
            }

            .list-link {
                text-align: left; /* 左对齐链接按钮 */
            }
        }